<template>
  <div>
    <h1>分布图</h1>
    <div
      id="xmap"
      style="width:100%;height:80vh;position:relative;margin:20px 0px 0px 0px;"
    ></div>
    <el-row :gutter="2" type="flex" justify="center" align="middle">
      <el-col :span="4">
        <el-switch v-model="isXMap3D" active-text="3D" inactive-text="2D">
        </el-switch>
      </el-col>
      <el-col :span="2">
        <el-button size="small" @click="onHomeClick">Home</el-button>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="" v-model="selectRoom" :readonly="true"></el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as XMap from '../libs/xmap'
import Stats from 'three/examples/jsm/libs/stats.module.js'

export default {
  name: 'DistributionMap',
  data() {
    return {
      isXMap3D: false,
      selectRoom: ""
    }
  },
  mounted() {
    let map = new XMap.Map('#xmap', {
      viewMode: XMap.ViewMode.MODE_2D,
      // showAllFloors: true,
      // showNames: false,
      // showPubPoints: false,
    })
    this.map = map
    map.load('./data.json').then((mo) => {
        mo.mapScene.setRoomTipsInfo(
          [
            {name: '扬基蜡烛', tipInfo: '1'},
            {name: '满记甜品', tipInfo: '9'},
            {name: 'TANGY', tipInfo: '5'},
            {name: 'VANS', tipInfo: '10'},
            {name: '汉堡王', tipInfo: '0'},
          ]
        );
    })
    map
      .loadTheme('custom', './theme/custom.json')
      .then(() => map.setTheme('custom'))

    map.on('click', (e) => {
      // console.log(e)
      this.selectRoom = e.address;
    })
    // map.on('rightClick', (e) => {
    //   // console.log(e)
    //   if (e.room && e.room.object) {
    //     e.room.object.setToolTip("");
    //   }
    // })

    let stats = new Stats()
    stats = new Stats()
    stats.dom.style.position = 'absolute'
    stats.dom.style.top = '0'
    this.stats = stats
    document.getElementsByTagName('body')[0].appendChild(stats.dom)

    function animate() {
      requestAnimationFrame(animate)
      stats.update()
    }
    animate()
  },
  watch: {
    isXMap3D(val) {
      if (val) {
        this.map.setViewMode(XMap.ViewMode.MODE_3D)
      } else {
        this.map.setViewMode(XMap.ViewMode.MODE_2D)
      }
    },
  },
  methods: {
    onHomeClick() {
      this.map.flyHome()
    },
  },
}
</script>

<style>
h1 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
  width: 220px;
}
</style>
